<!--
 * @Author: 许警 11378748333@
 * @Date: 2024-09-18 10:06:51
 * @LastEditors: 许警 11378748333@
 * @LastEditTime: 2024-09-23 11:31:25
 * @FilePath: /hsxlsystem/src/views/order/components/uploadOrder.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <a-modal :width="600" v-model:visible="modalVisible" title="导入订单" @cancel="cancel" @ok="ok">
    <div style="padding: 0 20px 20px 20px">
      <a-upload
        v-model:file-list="data.fileList"
        :maxCount="1"
        name="file"
        @change="handleChange"
        :action="data.action"
        accept=".xls,.xlsx"
      >
        <a-button style="margin-left: 30px" class="d-a-center">
          <upload-outlined></upload-outlined>
          导入订单
        </a-button>
      </a-upload>
    </div>
  </a-modal>
</template>

<script setup>
import { onMounted, reactive, ref, toRefs, computed } from 'vue'
import { url } from '@/utils/options'
import { message } from 'ant-design-vue'
import { importOrder } from '../../../api/order'
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  number: {
    default: null
  }
})

const emit = defineEmits(['update:visible', 'success'])

const modalVisible = computed({
  get: () => props.visible,
  set: val => {
    emit('update:visible', val)
  }
})

const data = reactive({
  action: url + '/admin/order/uploadOrder',
  fileList: [
    // {
    //   uid: '1',
    //   name: 'xxx.png',
    //   status: 'done',
    //   response: 'Server Error 500', // custom error message to show
    //   url: 'http://www.baidu.com/xxx.png'
    // }
  ],
  excelPath: ''
})

const handleChange = info => {
  if (info.file.status !== 'uploading') {
    console.log(info.file, info.fileList)
  }
  if (info.file.status === 'done') {
    message.success(`${info.file.name} 上传成功`)
  } else if (info.file.status === 'error') {
    message.error(`${info.file.name} 上传失败.`)
  }
}

// const cancle = () => {
//   emit('closeModal')
// }

// init()

// async function init() {
//   let form = {
//     number: props.number
//   }
//   let res = await selectOrderDetailOrganByNumber(form)
// }

onMounted(() => {})

const ok = () => {
  if (data.fileList.length < 1) return message.error('请上传文件')
  let excelPath = data.fileList[0].response.object
  console.log(data.fileList)

  importOrder({ excelPath }).then(res => {
    if (res.success) {
      emit('success')
      cancel()
      message.success(`导入成功`)
    }
  })
}
const cancel = () => {
  data.fileList = []
  emit('update:visible', false)
}

defineExpose({
  modalVisible
})
</script>
<style scoped>
.ant-form-item {
  margin-bottom: 10px;
}
</style>
